<template>
  <div>
    <el-row>
      <el-col :span="20">
        <div class="label_wrap">
          <label>关键字：</label>
          <div class="inp_content">
            <el-row :gutter="16">
              <el-col :span="3">
                <selectVue :config="data.configOption" :selectData.sync="data.searchData.selectData" />
              </el-col>
              <el-col :span="4">
                <el-input
                  v-model="data.searchData.keyword"
                  placeholder="请输入关键字"
                  clearable
                ></el-input>
              </el-col>
              <el-col :span="4">
                <el-button
                  type="danger"
                  style="height: 40px"
                  icon="el-icon-search"
                  @click="searchData"
                >搜索
                </el-button>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <el-tooltip class="item" effect="dark" content="添加用户" placement="left-start">
          <el-button
            type="primary"
            icon="el-icon-plus"
            circle
            class="pull_right"
            style="width:40px;height: 40px"
            @click="data.addDialog = true"
          ></el-button>
        </el-tooltip>
      </el-col>
    </el-row>
    <div class="margin_top_30"></div>

    <tableVue ref="userTable" :config="data.configTable" :tableRow.sync="data.tableRow">
      <template v-slot:status="slotData">
        <el-switch
          @change="handlerSwitch(slotData.data)"
          v-model="slotData.data.status"
          active-value="2"
          inactive-value="1"
        ></el-switch>
      </template>
      <template v-slot:handler="slotData">
        <el-button
          size="mini"
          type="danger"
          @click="handlerDel(slotData.data)"
        >删除
        </el-button>
        <el-button
          size="mini"
          type="success"
          @click="handlerEdit(slotData.data)"
        >编辑
        </el-button>
      </template>
      <template v-slot:batch>
        <el-button size="mini" @click="bathDel">批量删除</el-button>
      </template>
    </tableVue>

    <!-- 新增 -->
    <addDialog :flag.sync="data.addDialog" :editData="data.editData" @loadData="RefreshData" />
  </div>
</template>

<script>
import selectVue from "@c/select";
import tableVue from "@c/table";
// v3.0 抽离方法
import { global } from "@/utils/global3.0";
import addDialog from "./components/addDialog";
import { DelUser, UserActives } from "@/api/user";
import { reactive, ref, onMounted, watchEffect } from "@vue/composition-api";

export default {
  name: "userIndex",
  components: {
    selectVue,
    tableVue,
    addDialog
  },
  setup(props, { root, refs }) {
    const { confirm } = global();
    /**
     * data
     */
    const userTable = ref(null);
    const data = reactive({
      configOption: {
        init: ["truename", "phone", "email"]
      },
      // 选中的对象
      searchData: {
        selectData: {},
        keyword: ""
      },
      // 表格组件配置
      configTable: {
        // 是否使用 checkbox
        selection: true,
        // 表头
        tHead: [
          { label: "邮箱/用户名", field: "username", width: "", align: "center" },
          { label: "真实姓名", field: "truename", width: "120", align: "center" },
          { label: "手机号", field: "phone", width: "150", align: "center" },
          { label: "地区", field: "region", width: "", align: "center" },
          { label: "角色", field: "role", width: "", align: "center" },
          { label: "是否禁止登录", field: "sei", width: "", align: "center", columnType: "slot", slotName: "status" },
          { label: "操作", width: "", align: "center", columnType: "slot", slotName: "handler" }
        ],
        // 请求接口
        requestData: {
          url: "getUserList",
          method: "POST",
          data: {
            pageNumber: 1,
            pageSize: 10
          }
        },
        // 分页
        paginationShow: true,
        // 分页配置
        paginationLayout: "total, sizes, prev, pager, next, jumper"

      },
      // 新增标识
      addDialog: false,
      // table 选择的数据
      tableRow: {},
      // 阻止状态
      updateUserSatausFlag: false,
      // 编辑数据
      editData: {}
    });
    /**
     * methods 方法
     */
      // 搜索
    const searchData = () => {
        let requestData = {
          [data.searchData.selectData.value]: data.searchData.keyword
        };
        refs.userTable.paramsRefresh(requestData);
      };
    // 刷新数据
    const RefreshData = () => {
      // 父组件调用子组件的方法
      //  refs.userTable.refreshData(); // 第一张写法
      userTable.value.refreshData(); // 第二张写法 注意 ref userTable 名字需要相同
    };

    // 是否禁用
    const handlerSwitch = (params) => {
      // console.log(params);
      if (data.updateUserSatausFlag) {
        return false;
      }
      data.updateUserSatausFlag = true;
      UserActives({ id: params.id, status: params.status }).then(res => {
        console.log(res);
        let resData = res.data;
        if (resData.resCode === 0) {
          root.$message.success(resData.message);
          RefreshData();
          data.updateUserSatausFlag = false;
        }
      }).catch(error => {
        console.log(error);
        data.updateUserSatausFlag = false;
      });
    };

    // 删除用户
    const userDel = () => {
      DelUser({ id: data.tableRow.id }).then(res => {
        // console.log(res);
        let resData = res.data;
        if (resData.resCode === 0) {
          root.$message.success(resData.message);
          RefreshData();
          data.tableRow = {};
        }
      }).catch(error => {
        console.log(error);
      });
    };

    // 删除单个用户
    const handlerDel = (params) => {
      data.tableRow.id = [params.id];
      confirm({
        message: "确认删除当前信息，确认后将无法恢复！",
        type: "warning",
        success: userDel,
        fial: () => {
          data.tableRow = {};
        }
      });
    };

    // 编辑
    const handlerEdit = (params) => {
      data.addDialog = true;
      // 子组件赋值
      data.editData = Object.assign({}, params);
    };

    // 批量删除
    const bathDel = () => {
      let ID = data.tableRow.id;
      if (!ID || ID.length === 0) {
        root.$message.error("请勾选需要删除的用户！");
        return false;
      }
      confirm({
        message: "确认删除当前信息，确认后将无法恢复！",
        type: "warning",
        success: userDel,
        fial: () => {
          data.tableRow = {};
        }
      });
    };

    /**
     * watch 监听
     */

    /**
     * 生命周期
     */
    onMounted (() => {
    })
    return {
      data,
      searchData,
      userTable,
      RefreshData,
      handlerSwitch,
      handlerDel,
      handlerEdit,
      bathDel
    };
  }
};
</script>

<style scoped lang="scss">
@import "../../styles/config.scss";

.label_wrap {
  @include labelDom(left, 60, 40)
}
</style>
